<template>
	<div class="teachersFiles">
        <ul class="teacherInfoBox">
            <li v-for="item in userRecordInfo.archive_content" :key="item.field_id">
                <p :title="item.field_name">{{item.field_name}}</p>
                <div :title="item.value" v-if="item.value">{{item.value}}</div>
                <div v-else>--</div>
            </li>
        </ul>
        <div class="enclosureBox">
            <ul>
                <li v-for="(item,index) in imgEnclosure" :key="index">
                    <el-image :src="BASE_URL + item" fit="cover" :preview-src-list="[BASE_URL + item]"></el-image>
                </li>
            </ul>
        </div>
        <div class="editInfoButton">
            <el-button type="primary" v-show="$route.query.id == $g.user_id" size="mini" @click="editTeachInfo">修  改</el-button>
        </div>

        <el-dialog
            title="修改"
            :visible.sync="editInfoFlag"
            :close-on-click-modal="false" 
            :close-on-press-escape="false"
            @close="handlerClose"
            width="960px">
            <EditRecord v-if="edit_recordFlag" :teacherInfoId="teacherInfoId" @editInfo="editInfo"></EditRecord>
        </el-dialog>
	</div>
</template>
<script>
    import EditRecord from '../../space/index/editRecord';
	export default {
        components: {
            EditRecord
        },
		data() {
			return {
				userRecordInfo: {},
                imgEnclosure: [],
                editInfoFlag: false,
                teacherInfoId: {},
                edit_recordFlag: false,
			}
		},
		created(){
			this.getRecordManage()
			this.getRecordImage()
		},
		methods: {
			// 获取档案信息
            getRecordManage() {
                const success = res =>{
                    let item = res.data
                    this.userRecordInfo = item
					console.log(this.userRecordInfo, '获取档案信息')
                }
                let params = {
					user_id: this.$route.query.id,
                }
                this.$ajax.get('/api/newarchive/people_archive', {params, func: {success}})
            },
            // 获取档案图片
            getRecordImage() {
                const success = res =>{
                    console.log(res, '获取档案图片')
                    this.imgEnclosure = res.data
                }
                let params = {
					user_id: this.$route.query.id,
                }
                this.$ajax.get('/api/newarchive/people_archive_picture', {params, func: {success}})
            },
            editTeachInfo() {
                this.teacherInfoId = {
                    userid: this.userRecordInfo.userid,
                    archive_id: this.userRecordInfo.archive_id
                }
                this.editInfoFlag = true
                this.edit_recordFlag = true
            },
            editInfo(val) {
                this.editInfoFlag = val
                this.getRecordManage()
                this.getRecordImage()
                this.edit_recordFlag = false
            },
            handlerClose() {
                this.edit_recordFlag = false
            },
		}
	}
</script>
<style lang="scss" scoped>
.teachersFiles {
    padding: 10px;
    background-color: #fff;
    .teacherInfoBox {
        display: flex;
        flex-wrap: wrap;
        li {
            width: 33.3%;
            font-size: 14px;
            line-height: 40px;
            p {
                width: 30%;
                text-align: left;
                float: left;
                color: #555555;
                white-space:nowrap; 
                overflow:hidden; 
                text-overflow:ellipsis;
            }
            div {
                width: 70%;
                float: left;
                text-align: left;
                white-space:nowrap; 
                overflow:hidden; 
                text-overflow:ellipsis;
            }
        }
    }
    .enclosureBox {
        display: inline-block;
        width: 100%;
        height: 80px;
        overflow: hidden;
        ul {
            overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;
            height: 60px;
            width: 100%;
            padding-bottom: 20px;
            li {
                display: inline-block;
                height: 60px;
                width: 100px;
                text-align: center;
                position: relative;
                .el-image {
                    height: 100%;
                    width: 100%;
                }
                .el-image+.el-image {
                    margin-left: 5px;
                }
                >i {
                    position: absolute;
                    top: 0;
                    right: 0;
                    color: #fff;
                    background-color: red;
                    display: none;
                    z-index: 1;
                }
            }
            li+li{
                margin-left: 10px;
            }
            li:hover i{
                display: block;
            }
        }
        ul::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }
        ul::-webkit-scrollbar-track {
            background-color: #fff;
        }
        ul::-webkit-scrollbar-thumb {
            background: #e6e6e6;
            border-radius: 5px;
        }
    }
    .editInfoButton {
        height: 33px;
        text-align: center;
        .el-button {
            width: 100px;
            margin-top: 5px;
        }
    }
    .el-dialog__wrapper {
        /deep/.el-dialog__header {
            background-color: #409EFF;
            .el-dialog__title,
            .el-dialog__headerbtn .el-dialog__close {
                color: #fff;
            }
        }
        /deep/.el-dialog__body {
            padding: 30px 20px 0px 20px;
        }
    }
}
</style>
